<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
<style>
    body{
        margin: 0;
    }
   	.box{
		width: 400px;
		border: 1px solid #000;
		margin: 50px auto;
	}
	.tab{
		margin: 0;
		padding: 0;
		list-style: none;
		background-color: #000;
	}
	.tab li{
		float: left;
		width: 60px;
        /*margin: 0 10px;*/
		text-align: center;
		line-height: 26px;
		color: white;
	}
	.tab li.active{
		color: black;
		background-color: #aaa;
	}
	p{
		display: none;
	}
	p:first-child{
		display: block;
	}
	.clearfix::after{
		content: '';
		clear: both;
		display: block;
		height: 0;
		visibility: hidden;
	}

</style>
</head>
<body>
   <div class="box">
		<ul class="tab clearfix">
			<li class="active">标题一</li>
			<li>标题二</li>
			<li>标题三</li>
		</ul>
		<div class="content">
			<p>内容一<br>内容一<br>内容一<br></p>
			<p>内容二<br>内容二<br>内容二<br内容二<br></p>
			<p>内容三<br>内容三<br></p>
		</div>
	</div>
    <script src="jquery.js"></script>
</body>
</html>
<script>
    $('li').each(function(index){

         $('li').eq(index).hover(function(){
             
        $('li').eq(index).css('color','black').css('background-color','#aaa')
        .siblings().css('color','white').css('background-color','transparent')

        $('p').eq(index).css('display','block')
        .siblings().css('display','none')

    })
    })
     
</script>